<template>
  <div>
    <!-- mixin混入 -->
    <!-- 1、作用是分发组件的可复用功能 -->
    <!-- 2、组件内使用混入发生冲突时，除钩子函数保留两者之外（优先调用混入的），其他都是保留组件中的值 -->
    <!-- 3、全局混入会影响每一个之后创建的Vue实例，需十分谨慎！！！Vue-router就是利用Vue.mixin混入了组件选项 -->
    
    MixinDemo {{name}} {{age}} {{city}}
    <button @click="showName">Show name</button>
  </div>
</template>

<script>

import mixin from './mixin';

export default {
  data() {
    return {
      name: 'Aaron',
      age: '20',
      city: 'Hanchuan'
    }
  },
  mixins: [mixin],
  methods: {
  },
  mounted() {
    console.log('mixinDemo mounted');
  }

// vue.extends 用来创建一个vue实例，创建模板
//   // 创建构造器
// var Profile = Vue.extend({
//   template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
//   data: function () {
//     return {
//       firstName: 'Walter',
//       lastName: 'White',
//       alias: 'Heisenberg'
//     }
//   }
// })
// // 创建 Profile 实例，并挂载到一个元素上。
// new Profile().$mount('#mount-point')
}
</script>